<template>
    <div class="box">
        <!--轮播-->
        <div class="header">
            <div class="banner-box">
                <van-swipe :autoplay="3000" @change="onChange" indicator-color="white">
                    <van-swipe-item :key="index" v-for="(item,index) in bannerItems">
                        <router-link to="">
                            <img :src="item.img">
                        </router-link>
                    </van-swipe-item>
                    <div class="custom-indicator" slot="indicator">
                        {{ current + 1 }}/{{bannerItems.length}}
                    </div>
                </van-swipe>
                    <div class="count-box">限时抢购  距结束：{{countDownList}}</div>
            </div>
            <div class="main-box pa-20">
                <p class="multi-line">{{title}}</p>
                <div>
                    <p><span>¥<b>{{price}}</b></span>
                        <del v-if="oldPrice.trim() !== ''">¥{{oldPrice}}</del>
                    </p>
                    <button>分享赚{{commission}}</button>
                </div>
                <div class="share-img"><img src="@/assets/images/icon-share-up.png" @click="doShareShow"></div>
            </div>
        </div>
        <div class="gray-box"></div>
        <!--图文详情-->
        <div class="details-box">
            <van-tabs sticky v-model="active">
                <van-tab title="图文详情">
                    <img :src="ticketsDetails">
                </van-tab>
                <van-tab title="预定须知">内容 2</van-tab>
            </van-tabs>
        </div>
        <!--下边操作栏-->
        <div class="buy-bar">
            <div class="bar-box">
                <router-link to="/">
                    <p><img src="@/assets/images/details-index.png"><span>首页</span></p>
                </router-link>
                <span @click="isCollected=!isCollected" v-if="!isCollected">
                    <p><img src="@/assets/images/details-collect.png"><span>收藏</span></p>
                </span>
                <span @click="isCollected=!isCollected" v-else>
                    <p><img src="@/assets/images/details-collected.png"><span>已收藏</span></p>
                </span>
            </div>
            <div class="btn-box">
                <button @click="addCart">加入购物车</button>
                <button>立即抢购</button>
            </div>
        </div>
        <!--分享-->
        <div class="share-box">
            <img v-if="isShareDown" @click="doShareShow" src="@/assets/images/icon-share-down.png">
        </div>
        <!--<van-popup v-model="shareShow" position="top">-->
            <!--不要了-->
            <!--<div class="popup-share">-->
                <!--<div @click="shareGraphicShow=true">分享 <br> 图文</div>-->
                <!--<div @click="sharePosterShow=true"> 分享 <br> 海报</div>-->
            <!--</div>-->
        <!--</van-popup>-->
        
         <Share ref="share"></Share>
        <!--信息弹窗-->
        <van-popup position="bottom" v-model="infoShow">
            <div class="info-popup pa-l-r-20">
                <van-icon @click="infoShow = false" name="close" />
                <div class="info-header">
                    <i><img :src="bannerItems[0].img"></i>
                    <div>
                        <h3 class="multi-line">{{title}}</h3>
                        <span>剩余{{lastNum}}</span>
                        <!-- <p>¥<b>{{price}}</b></p>？ -->
                    </div>
                </div>
                <div class="input-warpper">
                    <div class="check-date-box">
                        <label>日期</label>
                        <div class="checked-list">
                            <div class="checked-list-item" :class="{active:isChecked==0}" @click="selectToday">
                                <p>今天{{today}}</p>
                                <div class="checked-price-box">
                                    ￥<span>239.2</span>
                                </div>
                            </div>
                            <div class="checked-list-item" :class="{active:isChecked==1}" @click="selectTomorrow">
                                <p>明天{{tomorrow}}</p>
                                <div class="checked-price-box">
                                    ￥<span>240</span>
                                </div>
                            </div>
                            <div class="checked-list-item checked-more" :class="{active:isChecked==2}" @click="getCalendar">
                                <div v-show="showDate==false||checkedDate==''" class="checkedDate">
                                    更多<br/>
                                    日期
                                </div>
                                <div class="checkedDate" v-show="showDate==true&&checkedDate!=''">
                                    {{checkedDate}}
                                    <div class="checked-price-box">￥<span>240.5</span></div>
                                </div>
                                <van-icon name="arrow" color="#28DBC7" size="24px" v-show="showDate==false||checkedDate==''"/>
                            </div>

                        </div>
                    </div>
                   <div>
                       <label>姓名</label>
                       <input placeholder="请输入姓名" type="text" v-model="userInfo">
                   </div>
                    <div>
                        <label>手机号</label>
                        <input placeholder="请输入手机号码" type="tel" v-model="telInfo">
                    </div>
                    <div>
                        <label>数量</label>
                        <van-stepper v-model="quantity" />
                    </div>
                </div>
                <div class="bottom-link">
                    <button @click="confirmOrder">确定</button>
                </div>
            </div>
        </van-popup>
        <!-- 日历 -->
        <van-calendar v-model="showCalendar" @confirm="onConfirm" :round="false"
  position="right" type="single" color="#28DBC7" :formatter="formatter"/>
    </div>
</template>

<script>
    import bannerImg from '@/assets/temporary/ticketsImg.png';//banner图
    import ticketsDetails from '@/assets/temporary/ticketsDetails.jpg'
    import Share from '@/components/share/share'
    export default {
        name: "spikeDetails",
        components:{Share},
        data() {
            return {
                bannerItems: [
                    {img: bannerImg,},
                    {img: bannerImg,},
                    {img: bannerImg,},
                ],
                current: 0,//轮播当前的标志
                title: `郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票...`,
                price: '95',
                oldPrice: "102",
                active: 0,
                commission: '10元',//分享佣金
                ticketsDetails: ticketsDetails,//图文详情
                isCollected: false,//是否收藏
                shareShow: false,//分享提示弹窗
                infoShow: false,//信息弹窗
                isChecked:-1,//日期是否选中
                today:'',//今天
                tomorrow:'',//明天
                checkedDate:'',//选中的日期
                showCalendar:false,//是否显示日历
								showDate:false,//更多日期 和 选中日期
								lastNum: 33,//剩余数量
								endDate:'',//最终选择的日期
                userInfo:'',//用户姓名
                telInfo:'',//手机号
                quantity:'',//购买数量
                isShareDown:false,//是否显示下面的分享
                countDownList: '00:00:00',//倒计时
                actEndTime: '2020-01-01 18:50:00',//结束时间
            }
        },
        methods: {
            //加入购物车
            addCart(){
                this.infoShow = true
            },
            // 轮播
            onChange(index) {
                this.current = index;
            },
            confirmOrder(){
							window.console.log(this.endDate)//打印最后选择的日期
                //确认单
                this.$router.push("/tickets/confirmOrder")
            },
            //上下滑动
            onScroll() {
                let scrolled = document.documentElement.scrollTop || document.body.scrollTop;
                let  header_height = document.getElementsByClassName("header")[0].offsetHeight;
                if (scrolled >= header_height) {
                    this.isShareDown = true
                }else {
                    this.isShareDown = false
                }
            },

            //倒计时
            timeFormat(param) {
                return param < 10 ? '0' + param : param;
            },
            countDown(it) {
                window.console.log(it)
                var interval = setInterval(() => {
                    // 获取当前时间，同时得到活动结束时间数组
                    let newTime = new Date().getTime();
                    // 对结束时间进行处理渲染到页面
                    let endTime = new Date(this.actEndTime).getTime();
                    let obj = null;
                    // 如果活动未结束，对时间进行处理
                    if (endTime - newTime > 0) {
                        let time = (endTime - newTime) / 1000;
                        // 获取天、时、分、秒
                        let day = parseInt(time / (60 * 60 * 24));
                        let hou = parseInt(time / (60 * 60 ));
                        let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
                        let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
                        obj = {
                            day: this.timeFormat(day),
                            hou: this.timeFormat(hou),
                            min: this.timeFormat(min),
                            sec: this.timeFormat(sec)
                        };
                    } else { // 活动已结束，全部设置为'00'
                        obj = {
                            hou: '00',
                            min: '00',
                            sec: '00'
                        };
                        clearInterval(interval);
                    }
                    this.countDownList = obj.hou + ':' + obj.min + ':' + obj.sec ;
                }, 1000);
            },
             doShareShow(){
              
                this.$refs.share.sharePosterShow = true
            },
            // 今天/明天是几号
            getDay(){
                let month=new Date().getMonth()+1
                let day=new Date().getDate()
                let tomorrowDay=day+1//明天是几号
                let tomorrowMonth=month//明天是几月
                // 明天
                if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
                    if(day==31){
                        tomorrowMonth=tomorrowMonth+1
                        tomorrowDay=1
                    }
                    tomorrowMonth=tomorrowMonth>=10?tomorrowMonth:'0'+tomorrowMonth
                    tomorrowDay=tomorrowDay>=10?tomorrowDay:'0'+tomorrowDay
                    this.tomorrow=tomorrowMonth+'-'+tomorrowDay
                }else{
                    if(day==30){
                        tomorrowMonth=tomorrowMonth+1
                        tomorrowDay=1
                    }
                    tomorrowMonth=tomorrowMonth>=10?tomorrowMonth:'0'+tomorrowMonth
                    tomorrowDay=tomorrowDay>=10?tomorrowDay:'0'+tomorrowDay
                    this.tomorrow=tomorrowMonth+'-'+tomorrowDay

                }
                // 今天
               month= month>=10?month:'0'+month
                day=day>=10?day:'0'+day
                this.today=month+'-'+day
            },
            getCalendar(){
                this.showCalendar=true
                this.isChecked=2
                this.showDate=true
                
						},
						// 日历内容
						formatter(day) {
							const month = day.date.getMonth() + 1;
							const date = day.date.getDate();

							if (month === 1) {
								if (date === 15) {
									day.bottomInfo = '￥20';
								} else if (date === 14) {
									day.bottomInfo = '￥21';
								}
							}
						return day;
					},
						// 点击今天
						selectToday(){
							this.isChecked=0
							this.showDate=false
							this.endDate=this.today
						},
						// 点击明天
						selectTomorrow(){
							this.isChecked=1
							this.showDate=false
							this.endDate=this.tomorrow
						},
						// 格式化选中的日期
            formatDate(date) {
                let m=date.getMonth()+1
                let d=date.getDate()
                m=m>=10?m:'0'+m
								d=d>=10?d:'0'+d
								
                return `${m}-${d}`;
						},
						// 日期选择 确定
            onConfirm(date) {
                this.showCalendar = false;
								this.checkedDate = this.formatDate(date);
								this.endDate=this.checkedDate
                if(this.checkedDate==this.today){
                   this.selectToday()
                }
                if(this.checkedDate==this.tomorrow){
                    this.selectTomorrow()
                }
                 
            }
            
        },
        created() {
            this.countDown();
            this.getDay()

        },
        mounted() {
            this.$nextTick(function () {
                window.addEventListener("scroll", this.onScroll);
            });
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    @import "@/assets/css/buyBar";
    .box{
        padding-bottom: vw(120);
    }
    .banner-box {
        position: relative;
        .count-box {
            position: absolute;
            left: 0;
            bottom: 0;
            width: vw(420);
            height: vw(48);
            background: $orgGradientBg;
            color: #fff;
            font-size: vw(28);
            padding:0 vw(18);
            line-height: vw(48);
            border-radius: 0 vw(48) 0 0;
        }
        .custom-indicator {
            position: absolute;
            bottom: vw(20);
            right: vw(30);
            font-size: vw(20);
            color: #fff;
        }
    }

    .main-box {
        position: relative;
        background-color: #fff;
        .share-img {
            position: absolute;
            right: 0;
            bottom: vw(20);
            width: vw(110);
        }
        .multi-line {
            font-size: vw(32);
            line-height: vw(42);
            -webkit-line-clamp: 2;
        }

        div {
            display: flex;
            /*justify-content: space-between;*/
            align-items: center;

            p {
                font-size: vw(20);
                color: #999;
                line-height: vw(60);
                span {
                    margin-right: vw(10);
                    color: $org_font;
                    font-size: vw(28);

                    b {
                        font-size: vw(48);
                    }
                }
            }
            del{
                margin-right: vw(20);
            }
            button {
                height: vw(32);
                padding: 0 vw(12);
                font-size: vw(20);
                color: #fff;
                border-radius: vw(4);
                background-color: $green;
            }
        }
    }
    .info-header{
        padding-bottom:vw(20);
        border-bottom: 1px solid #f7f7f7;
    }
    // 日期
    .input-warpper{
        .check-date-box{
            height: vw(130)!important;
            .checked-list{
                display: flex;
                .checked-list-item{
                    width: vw(138);
                    height: vw(100);
                    margin-left: vw(10);
                    padding:vw(15) 0;
                    border: 1px solid $green;
                    border-radius: vw(10);
                    box-sizing: border-box;
                    text-align: center;
                    font-size: vw(24);
                    color: $green;
                    &.active{
                        color: #fff;
                        background: $orgGradientBg;
                        >i{
                            color: #fff!important;
                        }
                    }
                    .checked-price-box{
                        font-size: vw(28);
                        font-weight: bold;
                        >span{
                            font-size: vw(36);
                        }
                    }
                    .checkedDate{
                        width: 100px;
                    }

                }
                .checked-more{
                    padding:vw(10) 0;
                    display: flex;
                    align-content: center;
                    justify-content: center;
                    line-height: vw(42);
                    >i{
                        margin-top:vw(15);
                    }
                    
                }
            }
        }
    }
</style>
